<script src="http://unpkg.com/vue"></script>
<div id="app"></div>
<script>
  const { createApp } = Vue;
  const mouseMoveMixin = {
    data() {
      return {
        x: 0,
        y: 0,
      };
    },
    methods: {
      update(e) {
        this.x = e.clientX;
        this.y = e.clientY;
      },
    },
    mounted() {
      window.addEventListener("mousemove", this.update);
    },
    unmounted() {
      window.addEventListener("mousemove", this.update);
    },
  };
  const otherMixin = {
    data() {
      return {
        x: 0,
        y: 0,
      };
    },
    methods: {
      update(e) {
        this.x = e.clientX + "px";
        this.y = e.clientY + "px";
      },
    },
    mounted() {
      window.addEventListener("mousemove", this.update);
    },
    unmounted() {
      window.addEventListener("mousemove", this.update);
    },
  };
  const App = {
    // 多个mixin同时存在，如果变量名重复出现，后边的会覆盖前面。
    template: `{{x}} {{y}}`,
    mixins: [mouseMoveMixin, otherMixin],
  };
  createApp(App).mount("#app");
</script>
